<template>
    <div class="catalog">
        <div class="top">
            <RouterLink to="/home">
                <i class="iconfont">&#xe61d;</i>
            </RouterLink>
            <RouterLink to="/search">
                <MySearch class="mySearch" :placeholder="110"></MySearch>
            </RouterLink>
        </div>
        <div class="content">
            <div class="nav">
                <li @click="clickNav($event, 0)" class="active">
                    <span>家用电器</span>
                </li>
                <li @click="clickNav($event, 1)">
                    <span>男装女装</span>
                </li>
                <li @click="clickNav($event, 2)">
                    <span>鞋靴箱包</span>
                </li>
                <li @click="clickNav($event, 3)">
                    <span>手机数码</span>
                </li>
                <li @click="clickNav($event, 4)">
                    <span>电脑办公</span>
                </li>
                <li @click="clickNav($event, 5)">
                    <span>家居家纺</span>
                </li>
                <li @click="clickNav($event, 6)">
                    <span>个人化妆</span>
                </li>
                <li @click="clickNav($event, 7)">
                    <span>休闲运动</span>
                </li>
                <li @click="clickNav($event, 8)">
                    <span>知识付费</span>
                </li>
            </div>
            <div class="show">
                <LoadingSpinner v-if="isLoading" :bgc="'#f3f3f3'"></LoadingSpinner>
                <template v-else>
                    <catalogList :data="list.list1" v-if="navIndex == 0"></catalogList>
                    <catalogList :data="list.list2" v-if="navIndex == 1"></catalogList>
                    <catalogList :data="list.list3" v-if="navIndex == 2"></catalogList>
                    <catalogList :data="list.list4" v-if="navIndex == 3"></catalogList>
                    <catalogList :data="list.list5" v-if="navIndex == 4"></catalogList>
                    <catalogList :data="list.list6" v-if="navIndex == 5"></catalogList>
                    <catalogList :data="list.list7" v-if="navIndex == 6"></catalogList>
                    <catalogList :data="list.list8" v-if="navIndex == 7"></catalogList>
                    <catalogList :data="list.list9" v-if="navIndex == 8"></catalogList>
                </template>
            </div>
        </div>
    </div>
</template>

<script>

import MySearch from '@/components/mySearch.vue'
import { GetData } from '@/api'
import CatalogList from '@/components/catalogList.vue'
import LoadingSpinner from '@/components/LoadingSpinner.vue'

export default {
    components: {
        MySearch,
        CatalogList,
        LoadingSpinner
    },
    data() {
        return {
            list: {
                list1: {
                    data: null,
                    img: 'https://x.dscmall.cn/storage/data/touch_catads/15630384831872.jpg'
                },
                list2: {
                    data: null,
                    img: 'https://x.dscmall.cn/storage/data/touch_catads/15630385461636.jpg'
                },
                list3: {
                    data: null,
                    img: 'https://x.dscmall.cn/storage/data/touch_catads/15630385672096.jpg'
                },
                list4: {
                    data: null,
                    img: 'https://x.dscmall.cn/storage/data/touch_catads/15630385252403.jpg'
                },
                list5: {
                    data: null,
                    img: 'https://x.dscmall.cn/storage/data/touch_catads/15630387587769.jpg'
                },
                list6: {
                    data: null,
                    img: 'https://x.dscmall.cn/storage/data/touch_catads/15630385077656.jpg'
                },
                list7: {
                    data: null,
                    img: 'https://x.dscmall.cn/storage/data/touch_catads/15630385872349.jpg'
                },
                list8: {
                    data: null,
                    img: 'https://x.dscmall.cn/storage/data/touch_catads/15630386266319.jpg'
                },
                list9: {
                    data: null,
                    img: 'https://x.dscmall.cn/storage/data/touch_catads/16708055278068.jpg'
                },
            },
            navIndex: 0,
            isLoading: true
        }
    },
    async created() {
        this.isLoading=true
        this.list.list1.data = await GetData('/catalog/list/858')
        this.isLoading = false
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
        async clickNav(e, index) {
            document.querySelectorAll('.nav li').forEach(item => {
                if (item.classList.contains('active')) item.classList.remove('active')
            })
            if (e.target.tagName == 'LI') e.target.classList.add('active')
            if (e.target.tagName == 'SPAN') e.target.parentNode.classList.add('active')
            this.navIndex = index
            this.isLoading = true
            window.removeEventListener('scroll', this.handleScroll)
            await this.changeList(index)
            this.isLoading = false
            window.scrollTo({
                top: 0,
            })
            setTimeout(()=>{
                window.addEventListener('scroll', this.handleScroll)
            },300)
        },
        async handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            const documentHeight = Math.max(
                document.body.scrollHeight,
                document.documentElement.scrollHeight
            );
            const threshold = 1; // 可根据需要调整阈值
            if (documentHeight - scrollTop - windowHeight <= threshold) {
                // console.log('到达页面底部')
                this.navIndex = this.navIndex + 1 > 8 ? 8 : this.navIndex + 1
                this.isLoading = true
                window.removeEventListener('scroll', this.handleScroll)
                await this.changeList(this.navIndex)
                document.querySelector('li.active').classList.remove('active')
                document.querySelectorAll('.nav li')[this.navIndex].classList.add('active')
                this.isLoading = false
                window.scrollTo({
                    top: 0,
                })
                setTimeout(()=>{
                    window.addEventListener('scroll', this.handleScroll)
                },300)
            }

        },
        async changeList(index) {
            if (index == 1 && this.list.list2.data == null) {
                this.list.list2.data = await GetData('/catalog/list/6')
            }
            if (index == 2 && this.list.list3.data == null) {
                this.list.list3.data = await GetData('/catalog/list/8')
            }
            if (index == 3 && this.list.list4.data == null) {
                this.list.list4.data = await GetData('/catalog/list/3')
            }
            if (index == 4 && this.list.list5.data == null) {
                this.list.list5.data = await GetData('/catalog/list/4')
            }
            if (index == 5 && this.list.list6.data == null) {
                this.list.list6.data = await GetData('/catalog/list/5')
            }
            if (index == 6 && this.list.list7.data == null) {
                this.list.list7.data = await GetData('/catalog/list/860')
            }
            if (index == 7 && this.list.list8.data == null) {
                this.list.list8.data = await GetData('/catalog/list/866')
            }
            if (index == 8 && this.list.list9.data == null) {
                this.list.list9.data = await GetData('/catalog/list/1460')
            }
        }
    }
}
</script>

<style scoped>
.catalog {
    background-color: #fff;
    position: relative;
}

.top {
    width: 100%;
    display: flex;
    height: 16vw;
    align-items: center;
    justify-content: space-evenly;
    border-bottom: .2667vw solid #ddd;
    background-color: #fff;
    position: fixed;
    top: 0;

    a {
        text-decoration: none;

        i.iconfont {
            font-size: 6.4vw;
            display: inline-block;
            color: #999;
            transform: rotate(180deg);
        }

        .mySearch {
            width: 85.0667vw;
        }
    }

}

.content {
    width: 100%;
    margin-top: 16vw;
    /* display: flex; */

    .nav {
        width: 22.6667vw;
        height: 100%;
        background-color: #f0f0f0;
        position: fixed;
        top: 16.1vw;

        li {
            width: 22.6667vw;
            height: 10.1333vw;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f0f0;

            span {
                height: 5.3333vw;
                width: 100%;
                font-size: 3.4667vw;
                line-height: 5.3333vw;
                color: #999;
            }
        }

        li.active {
            background-color: #fff;

            span {
                color: red;
                border-left: 3px solid red;
            }
        }
    }

    .show {
        margin-left: 22.6667vw;
        background-color: #fff;
    }
}
</style>